import React, { useEffect } from 'react';
import { useAppDispatch, useAppSelector } from '../../modules/store';
import { selectGlobal, switchFullPage, setBreadcrumbs } from '../../modules/global';
import { Layout } from 'tdesign-react';
import Style from './Page.module.less';

const { Content } = Layout;

const Page = ({
  children,
  isFullPage,
  breadcrumbs,
}: React.PropsWithChildren<{ isFullPage?: boolean; breadcrumbs?: string[] }>) => {
  const globalState = useAppSelector(selectGlobal);
  const dispatch = useAppDispatch();
  useEffect(() => {
    dispatch(switchFullPage(isFullPage));
  }, [isFullPage]);

  // 同步路由生成的面包屑到全局状态，供 Header 展示
  useEffect(() => {
    dispatch(setBreadcrumbs(breadcrumbs || []));
  }, [dispatch, breadcrumbs]);

  if (isFullPage) {
    return <>{children}</>;
  }


  return <Content className={Style.panel}>{children}</Content>;
};

export default React.memo(Page);
